<!--轮播图-->
<template>
  <view class='container'>
    <view class='tui-banner-box'>
      <swiper :autoplay='true' :circular='true' :duration='150' :indicator-dots='true' :interval='5000'
              class='tui-banner-swiper' indicator-active-color='#fff' indicator-color='rgba(255, 255, 255, 0.8)'>
        <swiper-item :key='index' v-for='(item,index) in banner'>
          <image :src="'../../../static/images/mall/banner/'+item.img" @click='toBannerDetail(item)'
                 class='tui-slide-image'
                 mode='scaleToFill'/>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  export default {
    name: "swiper",
    data() {
      return {
        banner: [
          {img: '1.jpg', url: ''},
          {img: '2.jpg', url: ''},
          {img: '3.jpg', url: ''},
          {img: '4.jpg', url: ''},
          {img: '5.jpg', url: ''}
        ]
      }
    },
    onLoad() {

    },
    methods: {
      toBannerDetail(item) {
        this.tui.toast('轮播图跳转');
      }
    }
  }
</script>

<style lang="css" scoped>
  @import "swiper.css";
</style>
